<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="xx,xx,xx" />
    <meta name="description" content="yyyyyyy" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta property="qc:admins" content="70003766576320416375" />
    <meta name="format-detection" content="telephone=no">
    <title>等级</title>
    <link rel="stylesheet" href="../css/base/jquery-ui-1.10.3.css" type="text/css">
    <link rel="stylesheet" href="../plugin/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/job.css">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<style>
    html,body{
        height: 100%;
    }
    .container-fluid{
        height: 100%;
        background: url("../images/grade-content-bg.png") no-repeat 14px 80%;
        background-size:contain;

    }
    .show-box{
        padding-top: 50px;
    }
    .show-box h5{
        text-align: center;
        margin-top: 10px;
        color: white;
    }
    .show-box h5:nth-child(2){
        height: 100px;
        width: 100px;
        line-height: 80px;
        border-radius: 50%;
        border: 10px dotted rgb(255, 235, 59);
        font-size: 25px;
        color: rgb(255, 235, 59);
        position: relative;
        left: 50%;
        margin-left: -50px;
    }

    .grade{
        color:#22d673;
        bottom: 0;
        width: 100px;
        margin-top: 30px;
        border:1px solid;

    }
    .grade-bar{
        width: 80px;
        height: 10px;
        background:rgba(255, 235, 59,0.3);
        margin: auto;
        border-radius: 10px;

    }
    .ui-progressbar-value{
        background:rgba(255, 235, 59,1);
        margin: 0!important;
    }
</style>
</head>
<body>
<div class="container-fluid">
    <!--header start-->
    <div class="row header">
      <div><span id="back" class="glyphicon  glyphicon-chevron-left" style="float: left;cursor: pointer;"></span>等级</div>
    </div>
        <!--header end-->

    <!--content start-->
    <div class="row content" style="height: 40px">
        <div class="show-box">
            <h5>身份等级</h5>
            <h5><span>太子</span></h5>
            <h5 class="grade-bar"></h5>
            <h5 style="position: relative">
                <a href="know-grade.html" class="btn grade" id="exchange">等级解读</a>
            </h5>
        </div>

    </div>

    <!--content end-->
</div>
</body>
<script src="../js/common/jquery-2.1.4.min.js"></script>
<script src="../js/common/jquery-ui.min.js"></script>
<script src="../js/index.js"></script>
<script src="../plugin/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    $(function() {
        $( ".grade-bar" ).progressbar({
            value: 60
        });
    });
</script>
</html>